import { Tabs, TabsProps } from "antd";
import { TAB_VALUES } from "./constant";
import styles from "./index.module.less";
import { useState } from "react";
import Banner from "./Banner";
import Entrance from "./Entrance";
import BannerMe from "./BannerMe";

export default () => {
	const [activeKey, setActiveKey] = useState(TAB_VALUES.banner);

	const items: TabsProps["items"] = [
		{
			key: TAB_VALUES.banner,
			label: "BANNER",
			children: <Banner />
		},
		{
			key: TAB_VALUES.entrance,
			label: "入口",
			children: <Entrance />
		},
		{
			key: TAB_VALUES.meBanner,
			label: "个人中心BANNER",
			children: <BannerMe />
		}
	];

	return (
		<div className={styles.container}>
			<Tabs className={styles.tab} activeKey={activeKey} items={items} onChange={t => setActiveKey(t)} />
		</div>
	);
};
